<template>
  <el-container
    v-if="showMain"
    style="padding:0px;position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;"
  >
    <el-main style="padding:0px;padding-right:20px;">
      <span
        style="font-size:25px; font-weight:bold; color:black;"
        :underline="false"
      >{{question.title}}
        <b style="float:right;">
          <el-tag v-if=question.hasBestAnswer>存在优解</el-tag>
          <el-tag
            v-else
            type="danger"
          >暂无优解</el-tag>
        </b>
      </span>
      <div style="padding-top:5px;">
        <el-tag
          effect="dark"
          type="success"
        >提问者</el-tag> {{question.replies[0].user.username}} --- {{question.replies[0].replyTime  | ellipsis}}
      </div>
      <p>{{question.replies[0].replyContent}}
        <el-image
          v-show="question.replies[0].url !== ''"
          style="display: block;margin: auto;width: 80%;padding-top:10px;"
          :src="question.replies[0].url"
          :preview-src-list="[question.replies[0].url]"
          fit="scale-down"
        ></el-image>
      </p>
      <span>
        <el-button
          type="text"
          class="el-icon-chat-dot-round"
          style="font-size:16px; color:gray;"
          v-if="!dialogVisible2"
          @click="dialogVisible2 = true"
        > 评论</el-button>
        <el-button
          type="text"
          class="el-icon-chat-dot-round"
          style="font-size:16px; color:gray;"
          v-else
          @click="dialogVisible2 = false"
        > 收起评论</el-button>
        <el-button
          type="text"
          class="el-icon-s-promotion"
          style="font-size:16px; color:gray;"
        > 分享</el-button>
        <el-button
          type="text"
          class="el-icon-star-on"
          style="font-size:16px; color:red;"
        > 收藏</el-button>
        <el-popconfirm
          title="确定不保留这道题供他人参考吗？"
          icon="el-icon-info"
          iconColor="red"
          style="float:right;"
          @onConfirm="del2(question.threadId)"
          v-if="question.replies[0].user.username === username"
        >
          <el-button
            type="text"
            class="el-icon-delete"
            slot="reference"
            style="font-size:16px;color:red;"
          > 删除</el-button>
        </el-popconfirm>
      </span>
      <el-card
        shadow="never"
        style="margin-right:10px;"
        :body-style="{ padding: '5px' }"
        v-if="dialogVisible2"
      >
        <div slot="header">
          <span style="font-size:20px; font-weight:bold;">评论</span>
          <el-button
            style="float:right;"
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="dialogVisible = true"
          ></el-button>
        </div>
        <el-card
          :body-style="{ padding: '8px' }"
          shadow="always"
          v-for="(item) in question.replies.slice(1)"
          :key="item.replyId+''"
          style="padding-bottom:5px;"
        >
          <div slot="header">
            <div>{{item.user.username}} --- {{item.replyTime | ellipsis}}</div>
            <div>
              <p>{{item.replyContent}}</p>
              <el-image
                v-show="item.url !== ''"
                style="display: block;margin: auto;width: 80%;"
                :src="item.url"
                :preview-src-list="[item.url]"
                fit="scale-down"
              ></el-image>
            </div>
          </div>
          <span>
            <el-button
              type="text"
              style="font-size:16px;color:gray;"
            > 
            <img class="imgsize" v-if="item.vote!==0" src="../assets/点赞.png" alt="">
            
            <span class="dianzan" v-if="item.vote!==0">
              已赞&nbsp;{{item.upVote}}
            </span>
            <span class="dianzan" v-if="item.vote===0" @click="vote(item)">
              <img class="imgsize" src="../assets/赞.png" alt="">
              点赞&nbsp;{{item.upVote}}
            </span>

           
            <!-- 踩之前 -->
            <span class="dianzan" style="margin-left:20px" v-show="item.downvote===false" @click="downVote(item)">
            <img class="imgsize"  src="../assets/差评.png" alt="">
              踩
            </span>
            <!-- 踩之后 -->
             <span class="dianzan"  style="margin-left:20px"  v-show="item.downvote===true" >
              <img class="imgsize"  src="../assets/踩 2.png" alt="">
              已踩
            </span>

            </el-button>
            <span
              style="float:right;"
              v-if="item.user.username === username"
            >
              <el-button
                type="text"
                class="el-icon-edit"
                style="font-size:16px;color:blue;"
                @click="showchan(item.replyId)"
              > 更改</el-button>
              <el-popconfirm
                title="确定删除该条评论吗？"
                icon="el-icon-info"
                iconColor="red"
                style="margin-left:10px;"
                @onConfirm="del(item.replyId)"
              >
                <el-button
                  type="text"
                  class="el-icon-delete"
                  slot="reference"
                  style="font-size:16px;color:red;"
                > 删除</el-button>
              </el-popconfirm>
            </span>
          </span>
          <el-dialog
            title="更改"
            :visible.sync="dialogVisible3"
            width="40%"
            center
          >
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="detailedcontent"
              style="font-size:16px;"
            >
            </el-input>
            <el-input
              type="url"
              autocomplete="off"
              size="mini"
              v-model="url"
              :clearable="true"
              style="width:350px;margin-top:25px;font-size:16px;"
            ><template slot="prepend">
                <el-button @click="open">图片Url:</el-button>
              </template></el-input>
            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="dialogVisible3 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="upd(replyId)"
              >更 改</el-button>
            </span>
          </el-dialog>
        </el-card>
      </el-card>
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="40%"
        center
      >
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="detailedcontent"
          style="font-size:16px;"
        >
        </el-input>
        <el-input
          type="url"
          autocomplete="off"
          size="mini"
          v-model="url"
          :clearable="true"
          style="width:350px;margin-top:25px;font-size:16px;"
        ><template slot="prepend">
            <el-button @click="open">图片Url:</el-button>
          </template></el-input>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="upload"
          >上 传</el-button>
        </span>
      </el-dialog>
    </el-main>
    <el-aside style="padding-left:5px;border-left: 1px solid #e1e2e5;">
      <Hotquestion></Hotquestion>
    </el-aside>
  </el-container>
</template>

<script>
import Hotquestion from '../components/Hotquestion.vue'
export default {
  name: 'answersheet',
  data() {
    return {
      downvote:0,
      showMain: false,
      username: sessionStorage.getItem("username"),
      replyId: 0,
      url: "",
      detailedcontent:"",
      reply: {
        replyContent: ""
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      question:{
        replies: [],
      }
    };
  },
  components: {
    Hotquestion,
  },
  mounted() {
    this.tid = JSON.parse(this.$route.query.id);
    // console.log(JSON.parse(this.$route.query.id));
    this.$http({
      url:"/api/thread/"+this.tid,
      headers:{
        token:sessionStorage.getItem('token')
      }
    }).then((res) => {
      console.log(res.data);
      this.question = res.data.thread;
      this.question.replies.forEach((res) => {
        this.$set(res,'url',res.replyContent.substring(res.replyContent.lastIndexOf("@#@")+3));
        res.replyContent = res.replyContent.substring(0,res.replyContent.lastIndexOf("@#@"));
        res.downvote = false;
      });
      this.showMain = true;
      // console.log(this.question);
    }).catch(function (error) {
      if (error.response) {
        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else {
        // Something happened in setting up the request that triggered an Error
         console.log('Error', error.message);
      }
      console.log(error.config);
    })
  },
  methods: {
    showchan(replyId) {
      this.dialogVisible3 = true;
      this.replyId = replyId;
    },
    upd(replyId) {
      if(this.detailedcontent === "" && this.url === "") throw("评论不能为空");
      this.reply.replyContent = this.detailedcontent + "@#@" + this.url;
      this.$http.put("/api/reply/" + replyId,this.reply).then((res) => {
        // console.log(res.status);
        if(res.status == 200) {
          this.$message({
            message: "更改成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "更改失败",
            type: "error",
            duration: 3000
          });
        }
        setTimeout("window.location.reload()", 500);
      }).catch(function (error) {
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      })
    },
    del(replyId) {
      this.$http.delete("/api/reply/" + replyId).then((res) => {
        // console.log(res.status);
        if(res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "删除失败",
            type: "error",
            duration: 3000
          });
        }
        setTimeout("window.location.reload()", 500);
      }).catch(function (error) {
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      })
    },
    del2(threadId) {
      this.$http.delete("/api/thread/" + threadId).then((res) => {
        // console.log(res.status);
        if(res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "删除失败",
            type: "error",
            duration: 3000
          });
        }
        // setTimeout("window.location.reload()", 1000);
      }).catch(function (error) {
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      })
    },
    upload() {
      try{
        if(this.detailedcontent === "" && this.url === "") throw("评论不能为空");
        this.reply.replyContent = this.detailedcontent + "@#@" + this.url;
        this.tid = JSON.parse(this.$route.query.id);
        this.$http.post("/api/thread/" + this.tid + "/reply",this.reply).then((res) => {
          // console.log(res.status);
          if(res.status == 200) {
            this.$message({
              message: "上传成功",
              type: "success",
              duration: 3000
            });
          }
          else {
            this.$message({
              message: "上传失败",
              type: "error",
              duration: 3000
            });
          }
          setTimeout("window.location.reload()", 1000);
        }).catch(function (error) {
          if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
          }
          console.log(error.config);
        })
      }
      catch(error){
        console.log(error)
        this.$message({
          message: error,
          type: "error",
          duration: 3000
        });
      }
    },
    open() {
      this.$notify({
        title: "关于图片上传",
        dangerouslyUseHTMLString: true,
        message:
          '<strong>需要您先将图片上传至<a href="https://sm.ms/" target="_blank">https://sm.ms/</a>，然后将获得的图片url地址填入下面的图片Url框中</strong>'
      });
    },
    vote(item){
      item.vote=1,
      item.upVote+=1,
      this.$http({
        method:"put",
        url:"/api/reply/"+item.replyId+"/vote",
        params:{
          state:1
        }
      }).then(res=>{
        console.log(res)
      })
    },
    downVote(item){
      console.log(item)
      item.downvote = true;
    },
  },
  filters: {
    ellipsis (value) {
      return value.slice(0,10) + ' ' + value.slice(11,19)
    }
  },
};
</script>

<style lang='less' scoped>
.imgsize{
  width: 30px;
  height: 30px;
  vertical-align:bottom;
}
.dianzan{
  font-size: 0.2rem;
  font-weight: bold;
}
</style>
